{% extends "base.html" %}
{% block script %}
    <script type="text/javascript" src="/site_media/js/modify_comment_votes.js"></script>
    <script type="text/javascript" src="/site_media/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    <script type="text/javascript" src="/site_media/js/modify_cart.js"></script>
{% endblock %}
{% block stylesheet %}
    <link rel="stylesheet" type="text/css" href="/site_media/css/product.css" />
    <link rel="stylesheet" type="text/css" href="/site_media/fancybox/jquery.fancybox-1.3.1.css" />
{% endblock %}
{% block content %}
    <div id="product-content">
        <div id="content-navigation">
            <a href="/">Home</a> >> <a href="/search/?category={{product.subcategory.category.name}}">{{ product.subcategory.category.name }}</a> >> <a href="/search/?category={{product.subcategory.category.name}}&subcategory{{ product.subcategory.name }}={{ product.subcategory.id }}">{{ product.subcategory.name }}</a> >> <a href="/products/{{product.id}}/">{{product.name}}</a> >> Comment replys
        </div><!-- the end for content-navigation -->
    {% if comment %}
        <div class="comment-div">
            <div class="comment-top-bar float-farther-div">
                <div class="comment-author float-left">Discussant: <font color="#1A66B3">{{comment.user.username}}</font></div>
                    <div class="comment-time float-right">{{comment.created|date:'d/m/Y f a'}}</div>
                </div>
            <div class="comment-middle">
                {{comment.content}}
            </div>
            <div class="comment-bottom-bar float-farther-div">
                <div class="comment-value float-right">
                    <span id="useful_num_{{comment.order_detail_id}}">{{comment.useful_num}}</span>/<span id="total_num_{{comment.order_detail_id}}">{{comment.total_num}}</span> people think this comment is usefull.
                    <input type="image" onclick="comment_votes(1,{{comment.order_detail_id}})" src="/site_media/images/good-mark.png" width="18px" alt="Useful" /></span>
                    |
                    <input type="image" onclick="comment_votes(0,{{comment.order_detail_id}})" src="/site_media/images/down.png" width="18px" alt="Unuseful"/>
                </div>
            </div>
        </div>
        {% if replies %}
            {% for reply in replies %}
            <div class="one-reply-div">
                <div class="comment-middle">{{reply.content}}</div>
                <div class="reply-bottom float-farther-div">
                    <div class="float-left">BY: {{reply.user.username}}</div>
                    <div class="float-right">{{reply.created|date:'d/m/Y f a'}}</div>
                </div>
            </div>
            {% endfor %}
        {% endif %}
        {% if user.is_authenticated %}
        <div>
            <hr/>
            <br/>
            <form action="/products/comment/reply/{{comment.order_detail_id}}/" method="post">
                <label>Reply to this comment</label>
                <p><textarea name="reply_content" value="" rows="3" cols="80"></textarea></p>
                <input type="submit" value="Submit" />
            </form>
        </div>
        {% else %}
        <br>
        <h3> You need login to reply this comment</h3>
        <a href="#login_panel" id="login_link" onclick="user_login_panel({{comment.order_detail_id}})"><img src="/site_media/images/login_button.png" alt="Login" /></a>
        <div id="login_panel" style="display:none">
            <form method="post" action="">{% csrf_token %}
            <p><img src="/site_media/images/logo.png" width="80" height="37" /><font>&nbsp&nbsp;Account</font></p>
            <p>
                <label for="id_username">Username: </label>
                <input type="text" name="username" id="id_username" />
            </p>
            <p>
                <label for="id_password">Password: </label>
                <input type="password" name="password" id="id_password" />
            </p>
            <p>
                <a href="javascript:void(0)" id="login-button" onclick="user_login()"><img type="image" src="/site_media/images/login_button.gif" alt="Login" /></a>
            </p>
            </form>
        </div>
        {% endif %}
    {% endif %}
    
    </div>
{% endblock %}